<!-- #a7bbcd -->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>小土家新用户注册</title>
    <!-- 引入css初始化文件 -->
    <link rel="stylesheet" href="{{static_url('css/normalize.css')}}" type="text/css"/>
    <!-- 专属的首页样式 -->
    <link rel="stylesheet" href="{{static_url('css/register.css')}}" type="text/css"/>
</head>
<body>
<div class="wrapper">
    <div class="head">
        <ul class="fl">
            <li><img src="{{static_url('image/xiaotujia.png')}}"></li>
            <li class="space"></li>
            <li><span class="bigger">注册小土家账号</span></li>
        </ul>
        <ul class="fr">
            <li><span>我已注册，现在就</span></li>
            <li><a href="#">登陆</a></li>
        </ul>
    </div>
    <div class="nav"></div>
    <div class="content">
        <div class="mod-reg">
            <div class="reg-content">
                <div class="name"> 用&ensp;户&ensp;名：
                    <input type="text" id="username" name="username" placeholder="请设置用户名" class=""><b></b>
                </div>

                <!--                    <div class="nickname" > 昵&emsp;&emsp;称：-->
                <!--                    <input type="text" id="" name="" placeholder="请设置昵称" class=""> -->
                <!--                    </div>-->

                <div class="phone"> 邮&ensp;&ensp;&ensp;&ensp;箱：
                    <input type="text" id="email" name="email" placeholder="请输入有效邮箱" class=""><b></b>
                </div>

                <div class="phone"> 验&ensp;证&ensp;码：
                    <input type="text" id="email_code" name="email_code" placeholder="请输入验证码" class="" style="width: 100px">
                    <a style="display: inline-block;width:120px;line-height: 35px;text-align: center;background-color: #c2c2c2; border-radius: 5px;font-size: 12px"
                       id="send-email-code">获取验证码</a><b></b>
                </div>

                <div class="code"> 密&emsp;&emsp;码：
                    <input type="password" id="password" name="password" placeholder="请设置密码" class=""><b></b>
                </div>

                <div class="recode"> 确认密码：
                    <input type="password" id="re-password" name="re-password" placeholder="请再次输入密码" class=""><b></b>
                </div>


                <!-- <div class="accept" >
                <input type="checkbox" id="" name=""  class="">&nbsp阅读并接受<a href="#">《小土家用户协议》</a>及<a href="#">《小土家隐私权保护声明》</a>
                </div> -->

                <div class="submit">
                    <input type="submit" id="register-btn" name="" value="注&nbsp&nbsp册" class="submitbutton">
                </div>

            </div>
            <div class="picture"></div>
        </div>
    </div>
    <div class="foot">
        <div class="link">
            <p>
                <a href="#">关于小土家</a>
                <span>|</span>
                <a href="#">常见问题</a>
                <span>|</span>
                <a href="#">违规投诉</a>
                <span>|</span>
                <a href="#">开放平台</a>
                <span>|</span>
                <a href="#">用户协议</a>
                <span>|</span>
                <a href="#">客服电话：</a>
                <a class="c" href="#">400-9216-666</a>
            </p>
        </div>
    </div>
</div>
</body>
<script src="{{static_url('js/jquery-3.2.1.min.js')}}"></script>
<script>
    $(function () {
        $('#register-btn').click(function () {
                let username = $('#username').val();
                let email = $('#email').val();
                let password = $('#password').val();
                let re_pwd = $('#re-password').val();
                let email_code = $('#email_code').val();
                if (username != '' && email != '' && password != '' && email_code != '') {
                    if (password != re_pwd) {
                        $('#re-password').next().text('两次密码不一致');
                        return false;
                    } else {
                        $.ajax({
                            url: '/register',
                            method: 'post',
                            data: {
                                'username': username,
                                'email': email,
                                'password': password,
                                'email_code': email_code,
                            },
                            success: function (data) {
                                if (data.data == '该用户名已存在') {
                                    $('#username').next().text('该用户名已被占用');
                                    return false;
                                } else if (data.data == '该邮箱已被注册') {
                                    $('#email').next().text('邮箱已被注册');
                                    return false;
                                }else if(data.data == '验证码错误'){
                                    $('#send-email-code').next().text('验证码错误');
                                    return false;
                                }else if (data.status) {
                                    window.location.href = '/login';
                                } else {
                                    console.log('异常')
                                }
                            }
                        })
                    }
                    // 有空值处理

                }
                // 清空b
                $('b').text('');
            }
        );
        // 发送验证码
        $('#send-email-code').click(function () {
            let email = $('#email').val();
            if (email.trim().length == 0) {
                //判断是否输入邮箱
                $('#send-email-code').next().text('请输入注册邮箱');
                return false;
            }
            if ($(this).hasClass('sending')) { //判断是否已经发送
                return false;
            }

            var ths = $(this);
            var time = 60; //设置倒计时时间为60s

            $.ajax({
                url: "/send_msg",
                type: 'POST',
                data: {
                    'email': email
                },
                dataType: 'json',
                success: function (arg) {
                    if (!arg.status) {
                        //是否发送成功
                        $('#send-email-code').next().text(arg.data);
                        //不成功显示错误信息
                    } else {
                        ths.addClass('sending');
                        //成功后显示已发送状态
                        var interval = setInterval(function () {
                            ths.text("已发送(" + time + ")");
                            time -= 1;
                            //定时器每运行一次，计数器减1
                            if (time <= 0) {
                                clearInterval(interval);
                                //一分钟过完，清除定时器
                                ths.removeClass('sending');
                                // 移除已发送状态
                                ths.text("获取验证码");
                                // 恢复未发送状态
                            }
                        }, 1000);
                        //定时器每隔1s运行一次
                    }
                }
            });
            // 清空b
            $('b').text('');
        })
    })
</script>
</html>